@import "_settings"

.sidebar
  position: absolute
  z-index: 10
  top: $header-height
  left: 0
  bottom: 0
  overflow-x: hidden
  overflow-y: auto
  -webkit-overflow-scrolling: touch
  -ms-overflow-style: none
  h2
    margin-top: .2em
  ul
    list-style-type: none
    margin: 0
    line-height: 1.5em
    padding-left: 1em
  li
    margin-top: .5em
  .sidebar-inner
    width: 260px
    padding: $content-padding-top + 10px 20px 60px 60px
  .version-select
    vertical-align: middle
    margin-left: 5px
  .menu-root
    padding-left: 0
  .menu-sub
    font-size: .85em
  .sidebar-link
    color: $light
    &.current
      font-weight: 600
      color: $green
    &.new
      &:after
        content: "NEW"
        display: inline-block
        font-size: 10px
        font-weight: 600
        color: #fff
        background-color: $green
        line-height: 14px
        padding: 0 4px
        border-radius: 3px
        margin-left: 5px
        vertical-align: middle
        position: relative
        top: -1px
    &:hover
      border-bottom: 2px solid $green
  .section-link
    &.active
      font-weight: bold
      color: $green
  .main-menu
    margin-bottom: 20px
    display: none
    padding-left: 0
  .nav-dropdown
    h4
      font-weight: normal
      margin: 0

@media screen and (max-width: 900px)
  .sidebar
    position: fixed
    z-index: 10
    background-color: #f9f9f9
    height: 100%
    top: 0
    left: 0
    box-shadow: 0 0 10px rgba(0,0,0,.2)
    transition: all .4s cubic-bezier(0.4, 0, 0, 1)
    -webkit-transform: translate(-280px, 0)
    transform: translate(-280px, 0)
    .sidebar-inner
      padding: 50px 10px 10px 20px
      box-sizing: border-box
    .sidebar-inner-index
      padding: 10px 10px 10px 20px
    .search-query
      width: 200px
      margin-bottom: 10px
    .main-menu
      display: block
    &.open
      -webkit-transform: translate(0, 0)
      transform: translate(0, 0)

@media print
  .sidebar
    display: none